<style lang="scss">

.item-card-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    border-radius: 5px;
    box-shadow: 0 0 20px #A8A8A8;
    margin: 10px 0;
}

.img-container {
    width: 35%;
    border-radius: 5px;
    padding: 5px 0;
    img {
        width: 100%;
        border-radius: 5px;
    }
}

.detail-container {
    width: 60%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    .item-title {
        font-size: 1.5rem;
        font-weight: 600;
        .mall-icon {
            height: 2rem;
            width: 2rem;
        }
    }
    .sell-detail {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 5px;
    }
    .quan-label {
        font-size: 1.4rem;
        color: #FF6600;
    }

    .quan-price {
        font-size: 2rem;
        color: #FF6600;
        font-weight: bold;
    }
}

.quan {
    height: 3.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 5px;
    .quan-icon {
        height: 100%;
        width: auto;
    }
    .quan-num {
        color: #FF6600;
        font-size: 1.5rem;
        font-weight: bold;
        padding-right: 6px;
        border-top-right-radius: 5px; 
        border-bottom-right-radius: 5px; 
        border-top: solid 2px #FF6600; 
        border-right: solid 2px #FF6600; 
        border-bottom: solid 2px #FF6600;
    }

}

.price-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}


</style>

<template>
    <div class="item-card-container">
        <div class="img-container" @click="checkItemDetail(itemInfo.num_iid)">
            <img :src="itemInfo.pict_url"/>
        </div>
        <div class="detail-container">
            <div class="item-title">
                <!-- <span><img class="mall-icon" src="/static/img/icon_tmall.png"/></span> -->
                <span @click="checkItemDetail(itemInfo.num_iid)">{{itemInfo.title}}</span>
            </div>
            
            <div class="sell-detail">
                <div class="ori-price"><s>原价:￥{{itemInfo.zk_final_price}}</s></div>
                <div class="ceil-num">销量:{{itemInfo.volume}}</div>
            </div>
            <div class="price-container">
                <div class="quan" v-show="itemInfo.coupon_amount">
                    <img class="quan-icon" src="/static/img/yhq.png"/>
                    <span class="quan-num">{{itemInfo.coupon_amount}}元</span>
                </div>
                <div>
                    <!-- <span class="quan-label">券后价:</span> -->
                    <span class="quan-price">￥{{itemInfo.coupon_final_price}}</span>
                </div>
            </div>
            <div>{{itemInfo.shop_title}}</div>
            
        </div>
    </div>
</template>

<script>
export default {
    name: 'itemCardRow',

    props: {
      itemInfo: {
        type: Object,
        default: () => ({})
      }
    },

    methods: {
        checkItemDetail: function(itemId) {
            this.$router.push({path: 'item-detail', query: {item_id: itemId}})
        }
    }
}
</script>
